<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade" tabindex="-1"
  role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #PersonalitysForm="ngForm" name="CommonForm" novalidate (ngSubmit)="save()" autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
            <span *ngIf="Template?.id">{{l("editTemplate")}}: {{Template?.id +' | '+Template?.title}}</span>
            <span *ngIf="!Template?.id">{{l("createTemplate")}}</span>
          </h4>
          <button type="button" class="close" (click)="close()" aria-label="Close">
            <i aria-hidden="true" class="ki ki-close"></i>
          </button>
        </div>
        <div class="modal-body">
          <tabset class="tab-container tabbable-line">
            <tab heading="{{l('PageTemplate')}}" customClass="m-tabs__item">
              <div class="row">
                <div class="col-5">
                  <div class="row">
                    <div class="form-group col-12">
                      <label>{{l('TemplateType')}}</label>
                      <div class="form-group ">
                        <div class="input-group">
                          <select class="form-control" [(ngModel)]="Template.templateType" name="templateType" required>
                            <!-- <option value="ActivityIntroduction">{{l('ActivityIntroduce')}}</option>
                            <option value="Register">{{l('Login')}}</option>
                            <option value="GameOnLine">{{l('OnlineGame')}}</option>
                            <option value="GameResult">{{l('GameResult')}}</option>
                            <option value="Award">{{l('WinningStatus')}}</option>
                            <option value="Action">{{l('messageTemplate')}}</option> -->
                            <option value="1">{{l('ActivityIntroduce')}}</option>
                            <option value="4">{{l('Login')}}</option>
                            <option value="5">{{l('OnlineGame')}}</option>
                            <option value="6">{{l('GameResult')}}</option>
                            <option value="3">{{l('WinningStatus')}}</option>
                            <option value="2">{{l('messageTemplate')}}</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-12">
                      <label>{{l("title")}}</label>
                      <input #templateTitle="ngModel" class="form-control" type="text" name="title" required [(ngModel)]="Template.title" placeholder="{{l('title')}}">
                      <validation-messages [formCtrl]="templateTitle"></validation-messages>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-12">
                      <label>{{l("ActionUrl")}}</label>
                      <input #templateActionUrl="ngModel" class="form-control" type="text" name="name" required [(ngModel)]="Template.actionUrl">
                      <validation-messages [formCtrl]="templateActionUrl"></validation-messages>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-12">
                      <label>{{l("description")}}</label>
                      <textarea rows="5" class="form-control" name="description" [(ngModel)]="Template.description"></textarea>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-12">
                      <label style="text-transform: none;">{{l("QueryString")}}({{l("SuchAs")}} : age=18&screenType=width)</label>
                      <textarea rows="5" class="form-control" name="args" [(ngModel)]="Template.args"></textarea>
                    </div>
                  </div>
                </div>
                <div class="col-7">
                  <div class="row">
                    <div class="col-6">
                      <div class="form-group">
                        <label class="control-label">{{l("logo")}}</label>
                        <app-fileupload [fileUrl]="Template.logo" (onUpLoadEvent)="logoOnUpload($event)" accept="image/*"></app-fileupload>
                      </div>
                    </div>
                    <div class="col-6">
                      <div class="form-group">
                        <label class="control-label">{{l("backgroundPic")}}</label>
                        <app-fileupload [fileUrl]="Template.backgroundImage" (onUpLoadEvent)="backgroundOnUpload($event)" accept="image/*"></app-fileupload>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6">
                      <div class="form-group">
                        <label class="control-label">{{l("bigPic")}}</label>
                        <app-fileupload [fileUrl]="Template.bigImage" (onUpLoadEvent)="bigPicOnUpload($event)" accept="image/*"></app-fileupload>
                      </div>
                    </div>
                    <div class="col-6">
                      <div class="form-group">
                        <label class="control-label">{{l("thumbnail")}}</label>
                        <app-fileupload [fileUrl]="Template.thumbnail" (onUpLoadEvent)="thumbnailOnUpload($event)" accept="image/*"></app-fileupload>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </tab>
          </tabset>
        </div>
        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-primary" (click)="close()">{{l("Cancel")}}</button>
          <button type="submit" class="btn btn-primary blue" [disabled]="!PersonalitysForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
            <i class="fa fa-save"></i>
            <span>{{l("Save")}}</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>